<template>
  <div>
    <el-dialog
      :title="titlecom"
      :visible.sync="dialogFormVisible"
      width="1200px"
    >
      <!-- :rules="rules" -->
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="优惠卷名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item
          label="满多少 金额可以使用"
          :label-width="formLabelWidth"
          prop="total"
        >
          <el-input v-model="form.total" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item
          label="抵扣多少元"
          :label-width="formLabelWidth"
          prop="price"
        >
          <el-input v-model="form.price" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item
          label="服务类别"
          :label-width="formLabelWidth"
          prop="servetypeid"
        >
          <el-select
            v-model="form.servetypeid"
            placeholder="请选择"
            @change="changeselect"
          >
            <el-option
              v-for="a in reqCategory2"
              :key="a.id"
              :label="a.name"
              :value="a"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="福利"
          :label-width="formLabelWidth"
          prop="classify"
        >
          <el-select v-model="form.classify" placeholder="请选择">
            <el-option
              v-for="a in reqCategory1"
              :key="a.id"
              :label="a.name"
              :value="a.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="领取后可以在多少天内使用"
          :label-width="formLabelWidth"
          prop="daynum"
        >
          <el-input v-model="form.daynum" class="specificationInput"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingtianjia()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addcouponadd, updatecouponupdate } from "@/api/couponlist";
import { getservetypes } from "@/api/server";
import { upload } from "@/api/editor.js";
import EditorBar from "@/components/Editor";
import draggable from "vuedraggable";
export default {
  components: {
    EditorBar,
    draggable,
  },
  data() {
    return {
      reqCategory2: [],
      reqCategory1: [
        { id: 1, name: "新用户赠送" },
        { id: 2, name: "充值会员获得" },
      ],
      parameter: [{ price: "", name: "", title: "" }],
      isClear: false,
      dialogVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "180px",
      form: {
        name: "",
        servetypeid: "",
        servetype: "",
        total: "",
        price: "",
        classify: "",
        daynum: "",
      },
      imgList: [],
      dialogImageUrl: "",
      dialogVisible1: false,
      rules: {
        // name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        // image: [{ required: true, message: "请选择头像", trigger: "blur" }],
        // phone: [
        //   {
        //     required: true,
        //     message: "请输入手机号",
        //     trigger: "blur",
        //   },
        // ],
        // pwd: [{ required: true, message: "请选择密码", trigger: "blur" }],
      },
      qubie: 0,
    };
  },
  methods: {
    changeselect(val) {
      // console.log(val);
      this.form.servetypeid = val.id;
      this.form.servetype = val.name;
    },
    change() {},
    // 获取二级优惠卷列表
    async getservetypes1() {
      let result = await getservetypes({adminid:Number(localStorage.getItem('userId'))});
      console.log(result);
      if (result.code == 0) {
        this.reqCategory2 = result.data;
      }
    },
    add() {
      this.form = {
        name: "",
        servetypeid: "",
        servetype: "",
        total: "",
        price: "",
        classify: "",
        daynum: "",
      };
      this.qubie = 0;
      this.getservetypes1();
      this.dialogFormVisible = true;
      this.imgList = [];
    },
    edit(val) {
      this.form = {
        name: "",
        servetypeid: "",
        servetype: "",
        total: "",
        price: "",
        classify: "",
        daynum: "",
      };
      this.qubie = 1;
      this.getservetypes1();
      this.form = Object.assign(this.form, val);
      this.dialogFormVisible = true;
      this.imgList = [];
    },
    // 关闭
    handleClose() {
      this.dialogFormVisible = false;
      this.$emit("refresh");
    },

    async quedingtianjia() {
      if (this.qubie == 0) {
        let param = {
          name: this.form.name,
          servetypeid: parseInt(this.form.servetypeid),
          servetype: this.form.servetype,
          total: parseFloat(this.form.total),
          price: parseFloat(this.form.price),
          classify: parseInt(this.form.classify),
          daynum: parseInt(this.form.daynum),
        };
        let result = await addcouponadd(param);
        if (result.code == 0) {
          this.$message({
            message: `添加优惠卷成功`,
            type: "success",
          });
          this.handleClose();
        }
      } else if (this.qubie == 1) {
        let param = {
          id: parseInt(this.form.id),
          name: this.form.name,
          servetypeid: parseInt(this.form.servetypeid),
          servetype: this.form.servetype,
          total: parseFloat(this.form.total),
          price: parseFloat(this.form.price),
          classify: parseInt(this.form.classify),
          daynum: parseInt(this.form.daynum),
        };
        let result = await updatecouponupdate(param);
        if (result.code == 0) {
          this.$message({
            message: `修改优惠卷成功`,
            type: "success",
          });
          this.handleClose();
        }
      }
    },
  },
  watch: {
    imgList: {
      handler(newVal) {
        // console.log("监听", newVal);
        // 这里创建新的数组 用逗号进行隔开 主要是接口要求
        let imagesarr = [];
        const result = newVal.map((item) => `${item.url}`).join(",");
        // this.form.content = result;
        console.log("猪嗨", this.form.content);
      },
      deep: true,
    },
  },
  computed: {
    titlecom() {
      if (this.qubie == 0) {
        return "添加优惠卷";
      } else {
        return "修改优惠卷";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.specificationInput {
  width: 250px;
}
.avatar-uploader-icon[data-v-22a48a68] {
  border: 1px dashed #d9d9d9;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.specificationInput {
  width: 250px;
}

.addguigeBtn {
  margin-left: 100px;
  margin-bottom: 22px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

.avatar {
  width: 180px;
  height: 180px;
  display: block;
}
v-deep .el-upload--picture-card {
  width: 200px !important;
  height: 200px !important;
}
.specificationInput1 {
  width: 150px;
}
</style>
